<template>
  <div>
    <van-nav-bar fixed title="商户进件" left-arrow @click-left="$utils.back($route.path);" />
    <div class="has-top">
      <div class="titleBg bg-primary">
        <img :src="titleBg" width="100%" alt srcset />
      </div>
      <ul>
        <li v-for="item in info" :key="item.number" class="item flex flex-v-c mlr-30 pb-30">
          <div class="number-box">
            <div :class="[{ done: item.done }, 'number']">{{ item.number }}</div>
          </div>
          <div class="item-right pd-25 bg-white br-10 flex flex-v-c">
            <div class="content pr-25">
              <h1 class="color-dark block-center">
                <SvgIcon :icon-class="item.id" />
                {{ item.title }}
              </h1>
              <p class="color-gray">{{ item.content }}</p>
            </div>
            <van-button
              :class="[item.done ?  'solid-btn btn':'hollow-btn btn']"
              round
              plain
              type="info"
              @click="goPage(item.id)"
            >
              {{
              item.done ? '已完成' : '去完成'
              }}
            </van-button>
          </div>
        </li>
      </ul>
      <div class="btn-box pt-40 pb-60 flex-center mlr-30">
        <!--   <van-button
          class="br-10 hollow-btn"
          type="info"
          native-type="submit"
          @click="handleSubmit(1)"
        >保存草稿</van-button>-->
        <van-button
          v-if="submitBtnShow"
          class="br-10 solid-btn"
          type="info"
          native-type="submit"
          @click="handleSubmit()"
        >{{submitBtnText}}</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import SvgIcon from 'components/SvgIcon'
import titleBg from 'assets/images/merchantPaper-1.png'
import { GetMerchantApplyData, SubmitMerchantApply } from 'api/merchantPaper'

export default {
  components: {
    SvgIcon
  },
  data() {
    return {
      titleBg,
      info: [
        {
          number: 1,
          title: '主体信息',
          content: '请填写商家的营业执照/登记证书、经营者/法人的证件等信息。',
          done: false,
          id: 'mainInfo'
        },
        {
          number: 2,
          title: '经营信息',
          content: '请填写商家的经营业务信息、售卖商品/提供服务场景信息。',
          done: false,
          id: 'manageInfo'
        },
        {
          number: 3,
          title: '结算规则',
          content: '请填写商家的结算费率规则、特殊资质等信息。',
          done: false,
          id: 'settlementRules'
        },
        {
          number: 4,
          title: '结算银行账户',
          content: '请填写商家提现收款的银行账户信息。',
          done: false,
          id: 'bankCount'
        },
        {
          number: 5,
          title: '超级管理员信息',
          content: '超级管理员需在开户后进行签约，并接收日常重要管理信息和进行资金操作，请确定其为商户法定代表人或负责人。',
          done: false,
          id: 'admin'
        }
      ],
      allDone: false,
      submitBtnText: '提交审核',
      submitBtnShow: true,
      request: {
        AccountNo: undefined //商户账户编号
      }
    }
  },
  created() {
    var accountNo = this.$route.query.accountNo
    if (accountNo) {
      this.request.AccountNo = accountNo
      this.GetMerchantApplyData()
    }
  },
  methods: {
    goPage(id) {
      let _this = this
      //console.log(this.info[0].done)
      // this.$router.push({
      //   path: '/merchantPaper/' + id,
      //   query: { accountNo: this.request.AccountNo }
      // })

      if (id === 'mainInfo') {
        _this.$router.push({
          path: '/merchantPaper/mainInfo',
          query: { accountNo: this.request.AccountNo }
        })
      } else {
        _this.$router.push({
          path: '/merchantPaper/' + id,
          query: { accountNo: this.request.AccountNo }
        })
      }
    },
    GetMerchantApplyData() {
      let _this = this
      GetMerchantApplyData(_this.request).then(res => {
        if (!res) {
          this.$toast({
            type: 'fail',
            message: '申请记录不存在',
            onClose: function() {
              console.log(1)
              _this.$utils.back(_this.$route.fullPath)
            }
          })
        }
        if (res) {
          if (res.Data.Status.Status === 7) {
            _this.submitBtnShow = false
          }
          _this.submitBtnText = res.Data.Status.Status === 2 ? '审核中' : '提交审核'
          console.log(_this.status)
          _this.info[0].done = res.Data.InputMain
          _this.info[1].done = res.Data.InputScene
          _this.info[2].done = res.Data.InputSettlement
          _this.info[3].done = res.Data.InputBankAccount
          _this.info[4].done = res.Data.InputAdmin
          _this.main = res.Data.Main
          _this.accountNo = res.Data.AccountNo
          let allIsDone = true
          _this.info.forEach(tem => {
            if (tem.done === false) {
              allIsDone = false
            }
          })
          _this.allDone = allIsDone
        }
      })
    },
    handleSubmit() {
      var _this = this
      if (_this.allDone) {
        if (_this.submitBtnText === '审核中') {
          this.$toast.fail('您的申请正在审核中，无需再次提交')
        } else {
          SubmitMerchantApply(this.request).then(res => {
            if (res) {
              _this.submitBtnText = '审核中'
              this.$toast({
                type: 'success',
                message: '已提交申请,等待审核',
                forbidClick: true
                // onClose: function() {
                //   _this.$router.push({
                //     path: '/person'
                //   })
                // }
              })
            }
          })
        }
      } else {
        this.$toast.fail('还有资料未完成，请继续完成')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@mixin before($top: 0, $height: 100%) {
  content: '';
  position: absolute;
  left: 0;
  top: $top;
  width: 0;
  height: $height;
  border-left: 2px dashed $colorBorder;
}

.titleBg {
  height: 220px;
  width: 750px;
  position: relative;
}
.item {
  position: relative;
  &:before {
    @include before;
  }
  &:first-child {
    padding-top: 30px;
  }
  &:first-child:before {
    @include before(50%, 50%);
  }
  &:last-child:before {
    @include before(0, 50%);
  }
}

.number-box {
  border-top: 2px $colorBorder dashed;
  width: 42px;
  flex-grow: 0;
  position: relative;
}
.number {
  position: absolute;
  width: 32px;
  height: 32px;
  line-height: 32px;
  font-size: 24px;
  text-align: center;
  color: $colorBg;
  background: $colorC;
  top: -16px;
  left: -16px;
  border-radius: 16px;
}
.done {
  @include bg-primary;
}
.item-right {
  width: 622px;
  flex-grow: 2;
  @include flex-justify();
}

.content {
  h1 {
    font-size: 30px;
  }
  p {
    font-size: 24px;
  }
  .svg-icon {
    font-size: 36px;
    margin-right: 14px;
  }
}

.btn {
  flex-shrink: 0;
  height: 54px;
  line-height: 54px;
  font-size: 24px;
}
.btn-box button:first-child {
  margin-right: 0;
}
</style>
